<div class="flexRow gutterH">
  <div class="col4 gutterVMd2">
    <div class="userCard js-userCard">
    </div>
    <% if(ob.moderator && ob.moderatorInfo) { %>
    <div class="contentBox padMd2 clrBr clrP clrSh2 js-moderatorInfo">
      <div class="flexVBot gutterH rowLg snipKids">
        <div class="tx4 flexExpand"><strong><%= ob.polyT('userPage.moderator') %></strong></div>
        <div class="clrT2 tx5">
          <a class="link js-termsLink">
            <%= ob.polyT('userPage.termsOfService') %>
          </a>
        </div>
      </div>
      <div class="tx2 clrT2 txCtr rowMd">
        <% var amount = ob.currencyMod.convertAndFormatCurrency(ob.moderatorInfo.fee.fixedFee.amount, ob.moderatorInfo.fee.fixedFee.currencyCode, ob.displayCurrency) %>
        <%= ob.polyT(`userPage.${ob.moderatorInfo.fee.feeType}`, { amount: amount, percentage: ob.moderatorInfo.fee.percentage }) %>
      </div>
      <div class="flexHCent">
        <%= ob.processingButton({
        className: `btn clrP clrBr clrSh2 js-addModerator ${ ob.currentModerator ? 'hide' : ''}`,
        btnText: ob.polyT('userPage.addModerator')
        }) %>
        <%= ob.processingButton({
        className: `btn clrP clrBr clrSh2 js-removeModerator ${ !ob.currentModerator ? 'hide' : ''}`,
        btnText: ob.polyT('userPage.removeModerator')
        }) %>
      </div>
    </div>
    <% } %>
    <div class="informationList listBox padMd2 clrBr clrP clrSh2">
      <div class="informationHeader">
        <strong><%= ob.polyT('userPage.information') %></strong>
      </div>
      <div class="listItem">
        <div class="flex">
          <span class="flexExpand"><%= ob.polyT('userPage.peerID') %></span>
          <span class="clrT hide js-guidCopied"><%= ob.polyT('copiedToClipboard') %></span>
        </div>
        <div class="clrT2">
          <a class="js-guid clrT2" data-guid="<%= ob.peerID %>"><%= ob.peerID %></a>
        </div>
      </div>
      <% if (ob.contactInfo) { %>
        <% if (ob.contactInfo.website){ %>
          <div class="listItem">
            <div><%= ob.polyT('userPage.website') %></div>
            <div>
              <a class="clrT2" href="<%= ob.contactInfo.website.startsWith('http') ? ob.contactInfo.website : `http://${ob.contactInfo.website}` %>"><%= ob.contactInfo.website %></a>
            </div>
          </div>
        <% } %>
        <% if (ob.contactInfo.email){ %>
          <div class="listItem">
            <div><%= ob.polyT('userPage.email') %></div>
            <div class="clrT2"><%= ob.contactInfo.email %></div>
          </div>
        <% } %>
        <% ob.contactInfo.social.forEach(function(account) { %>
          <div class="listItem">
            <div><%= account.type %></div>
            <div class="clrT2">
              <% print(ob.is.url(account.username) ? `<a data-open-external class="clrT2" href="${account.username}">${account.username}</a>` : account.username) %>
            </div>
          </div>
        <% }); %>
      <% } %>
    </div>
  </div>
  <div class="col8">
    <div class="box">
      <div class="aboutBox contentBox padMd clrBr clrP clrSh2">
        <div class="informationHeader row">
          <strong><%= ob.polyT('userPage.about') %></strong>
        </div>
        <% if (ob.about) { %>
          <%= ob.about %>
        <% }else{ %>
          <span class="clrT2"><i><%= ob.polyT('userPage.aboutEmpty') %></i></span>
        <% } %>
      </div>
    </div>
  </div>
</div>
